<!DOCTYPE html>
<html >

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dish</title>
    <style>
       
        body {
            /* background: url(http://vm.cau.edu.cn/~s2020307150626//resource/image/bg.jpg) no-repeat top center; */
			/* background: url(../../static/img/back2.jpg); */
			background-color: #f7f1e3;
            line-height: 1.15;
        }

        header {
            position: relative;
            height: 1.25rem;
            background: url(http://vm.cau.edu.cn/~s2020307150626//resource/image/head_bg.png) no-repeat;
            background-size: 100% 100%;
        }

        header h1 {
            font-size: 0.475rem;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }

        header .showTime {
            position: absolute;
            right: 0.375rem;
            top: 0;
            line-height: 0.9375rem;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.25rem;
        }

        .mainbox {
            display: flex;
            min-width: 1024px;
            max-width: 1920px;
            margin: 0 auto;
            padding: 0.125rem 0.125rem 0;
        }

        .mainbox .column {
			position: relative;
            flex: 5;
            margin: 0 0.125rem 0.1875rem;
            overflow: hidden;
        }


        .mainbox .panel {
            margin: 0 40% .0625rem 0;
            position: relative;
            height: 7.5rem;
            padding: 0 0.1875rem 0.5rem;
           
            margin-bottom: 0.1875rem;
			background: #FFFFFF;
			border-radius: 20px;
            /* background: url(http://vm.cau.edu.cn/~s2020307150626//resource/image/line\(1\).png) rgba(255, 255, 255, 0.03); */
        }

        /* .mainbox .panel::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }

        .mainbox .panel::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }

        .mainbox .panel .panel-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }

        .mainbox .panel .panel-footer::before {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-bottom: 2px solid #02a6b5;
            content: "";
        }

        .mainbox .panel .panel-footer::after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-bottom: 2px solid #02a6b5;
            content: "";
        } */

        .mainbox .panel h2 {
            height: 0.6rem;
            color: #fff;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.25rem;
            font-weight: 400;
        }

        .mainbox .panel h2 a {
            color: #fff;
            text-decoration: none;
            margin: 0 0.125rem;
        }

        .mainbox .panel .chart {
            height: 7rem;

        }
			
		.table_container{
			position: absolute;
			right: .06125rem;
			top: 0;
			height: 99%;
			width: 38%;
			border: #FFF9D7 solid 1px;
			display: flex;
			border-radius: 20px;
			background: #FFFFFF;
			flex-direction: column;
			align-items: center;
		}
			
		.item_head{
			position: relative;
			width: 90%;
			height: 10%;
			
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25px;
			
		}
		.item_list{
			position: relative;
			width: 90%;
			height: 90%;
			
			overflow-y:auto;
			display: flex;
			flex-direction: column;
			
			
			
		}
		.item_list::-webkit-scrollbar {
		           width: 4px;    
		           /*height: 4px;*/
		       }
		      .item_list::-webkit-scrollbar-thumb {
		           border-radius: 10px;
		           -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		           background: rgba(0,0,0,0.2);
		       }
		       .item_list::-webkit-scrollbar-track {
		           -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		           border-radius: 0;
		           background: rgba(0,0,0,0.1);
					
		       }
		.item{
			position: relative;
			display: flex;
			width: 100%;
			height: 100px;
			padding-bottom: 10px;
			border-bottom: #b8b8b8 solid 1px ;
			margin-bottom: 10px;
			
		}
		.left{
			position: relative;
			height: 100%;
			width: 10%;
			margin-right: 5%;
			font-size: 20px;
			color: #cecece;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.middle{
			position: relative;
			display: flex;
			width: 60%;
			height: 100%;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
		}
		.name{
			position: relative;
			display: flex;
			font-size: 20px;
			justify-content: flex-start;
			align-items: center;
			height: 40%;
			width: 100%;
			
			
		}
		.pricr_num{
			position: relative;
			width: 100%;
			height: 40%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.num{
			height:100% ;
			width: 80%;
			
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
		}
		.price{
			height: 100%;
			width: 30%;
			font-size: 18px;
			font-weight: 800;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
		}
		.right{
			position: relative;
			height:100% ;
			width: 30%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.right img{
			position: relative;
			width: 75px; 
			height:75px ; 
			
			border-radius: 10px;
		}

       /* @keyframes rotate1 {
            form {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes rotate2 {
            form {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(-360deg);
            }
        }

        /* 约束屏幕尺寸 */
        /*@media screen and (max-width: 1024px) {
            html {
                font-size: 42px !important;
            }
        }

        @media screen and (min-width: 1920px) {
            html {
                font-size: 80px !important;
            }
        } */
    </style>
</head>

<body>
    <!-- 头部的盒子 -->
    

    <!-- 页面主体部分 -->
    <section class="mainbox">
        <div class="column">

            <div class="panel bar">
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel bar2">
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
			<div class="table_container">
				<div class="item_head">
						销售总榜
				</div>
				<div class="item_list">
				{% for item in data_list%}
				<div class="item">
					<div class="left">
						#{{data_list.index(item)+1}}
					</div>
					<div class="middle">
						<div class="name">
							{{item.name}}
						</div>
						<div class="pricr_num">
							<div class="price">
								${{item.price}}
							</div>
							<div class="num">
								{{item.num}}单
							</div>
						</div>
					</div>
					<div class="right">
						<img src={{item.pic}} >
						
					</div>
					     
					
				</div>
					{% endfor%}
				</div>
				
			</div>
        </div>

        <!-- <div class="column">
            
        </div> -->
    </section>


    <script>
        (function flexible(window, document) {
            var docEl = document.documentElement;
            var dpr = window.devicePixelRatio || 1;

            // adjust body font size
            function setBodyFontSize() {
                if (document.body) {
                    document.body.style.fontSize = 12 * dpr + "px";
                } else {
                    document.addEventListener("DOMContentLoaded", setBodyFontSize);
                }
            }
            setBodyFontSize();

            // set 1rem = viewWidth / 10
            function setRemUnit() {
                var rem = docEl.clientWidth / 24;
                docEl.style.fontSize = rem + "px";
            }

            setRemUnit();

            // reset rem unit on page resize
            window.addEventListener("resize", setRemUnit);
            window.addEventListener("pageshow", function (e) {
                if (e.persisted) {
                    setRemUnit();
                }
            });

            // detect 0.5px supports
            if (dpr >= 2) {
                var fakeBody = document.createElement("body");
                var testElement = document.createElement("div");
                testElement.style.border = ".5px solid transparent";
                fakeBody.appendChild(testElement);
                docEl.appendChild(fakeBody);
                if (testElement.offsetHeight === 1) {
                    docEl.classList.add("hairlines");
                }
                docEl.removeChild(fakeBody);
            }
        })(window, document);

    </script>
    <!-- 引入js -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <!-- 引入echarts -->
    <script type="text/javascript" charset="utf8"
        src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script>

        // 取数据并画近三月各菜品销量柱状图
        $(function () {
            $.ajax({
                url: 'dishSales', //向 http://127.0.0.1:自己的端口号/xxx 发送一个请求
                async: true, //异步请求，不用管
                success: function (res) { //回调函数，请求成功后打印返回的结果
                    // 数据处理
                    let name = res.map(function (item, index, array) {
                        return item.DNAME
                    })
                    let N = res.map(function (item, index, array) {
                        return item.N
                    })
                    // 画图
                    let c = echarts.init(document.querySelector('.panel.bar>.chart'))
                    /** @type EChartsOption */
                    const op = {
                        yAxis: {
                            type: 'category',
                            data: name,
                            boundaryGap: true,
                            axisTick: {
                                show: false,

                            },
                            axisLabel: {
                                interval: 0,
                                color: '#000',
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#000',
                                },
                            },
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#000',
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#000',
                                },
                            },
                            axisTick: {
                                lineStyle: {
                                    color: "#000",
                                },
                            },
                        },
                        series: [
                            {
                                data: N,
                                type: 'bar',
                                itemStyle: {
                                    color: 'red',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0)'
                                },
                            },
                        ],
                        title: {
                            text: '近三月各菜品销量图',
                            left: 'center',
                            textStyle: {
                                color: '#000',
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                                shadowStyle: {
                                    color: 'gray',
                                    opacity: 0.5,
                                },
                            }
                        },
                        grid: {
                            containLabel: false,
                            bottom: '7%',
                            right: '10%',
                            left: '10%',
                            top: '7%',
                        },
                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            },
                            iconStyle: {
                                color: '#000',
                            },
                        },

                    }
                    if (op && typeof op === 'object') {
                        c.setOption(op);
                    }
                    window.addEventListener('resize', c.resize);
                }
            })
        }
        )


        // 取数据并画各菜品历史累计销量占比饼图
        $(function () {
            $.ajax({
                url: 'dishSalesSum', //向 http://127.0.0.1:自己的端口号/xxx 发送一个请求
                async: true, //异步请求，不用管
                success: function (res) { //回调函数，请求成功后打印返回的结果
                    // 画图
                    console.log(res);
                    let c = echarts.init(document.querySelector('.panel.bar2>.chart'))
                    /** @type EChartsOption */
                    const op = {
                        series: [
                            {
                                data: res,
                                type: 'pie',
                                radius: '70%',
                                roseType: 'radius',
                                itemStyle: {
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(255, 255, 255, 0.5)',
                                },
                                label: {
                                    color: '#000',
                                },
                            },
                        ],
                        grid: {
                            containLabel: false,
                            bottom: '7%',
                            right: '10%',
                            left: '10%',
                            top: '7%',
                        },
                        title: {
                            text: '各菜品历史累计销量占比图',
                            left: 'center',
                            textStyle: {
                                color: '#000',
                            },
                        },
                        tooltip: {
                            trigger: 'item',
                        },
                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            },
                            iconStyle: {
                                color: '#000',
                            },
                        },
                    }
                    if (op && typeof op === 'object') {
                        c.setOption(op);
                    }
                    window.addEventListener('resize', c.resize);
                }
            })
        }
        )
    </script>
</body>

</html>